<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>库存月报表</cite>
        </a>
      </span>
</div>
<div class="x-body">

    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <select  class="" name="keyword" id="customer_id" lay-filter="keyword">
                        <option value="">--请选择供应商--</option>
                        <c:forEach items="${allCustomerList }" var="customer">
                            <option value="${customer.id}">${customer.customer_name }</option>
                        </c:forEach>
                    </select>
                </div>

                <div class="layui-input-inline" >
                    <input class="layui-input" id="keyword2" placeholder="请输入产品名称" style="width: 150px">
                </div>

                <div class="layui-input-inline" style="width: 165px">
                    <input type="text" class="layui-input" id="test1" style="display: inline; width: 180px; margin-left: 10px">
                    <%--<input class="layui-input" name="date" id="date" placeholder="请输入日期" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">--%>
                </div>


                <%-- <div class="layui-input-inline" style="width: 150px">

                     <input type="text" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss" id="test2" style="display: inline; width: 150px; margin-left: 10px">
                 </div>--%>
                <div class="layui-input-inline" style="width: 30px"	>
                    <input type="hidden" id="dateTime">
                    <input type="hidden" id="dateTime2">
                </div>

                <div class="layui-input-inline" style="width: 150px"	>
                    <%--<button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>		</div>--%>
                        <button class="layui-btn" data-type="reload">搜索</button>
                </div>

        </div>
    </div>

    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>





</div>
<table class="layui-tab" id="table1" lay-filter="table1"></table>
<table class="layui-table" id="tableOut" lay-filter="tableOut"></table>
<script>
    var mid = "";
    var man = "";
    var mBatch = "";
    var time = "";
    var table;
    layui.use(['table','layer','upload','form','laydate'], function(){
        var table = layui.table;
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' ,//指定元素
            value: new Date(),
            type: 'datetime',
            done:function(value, date, endDate) {

                $('#dateTime').val(value);

            }

        });


        table.render({
            elem: '#table1'
            ,url:'${pageContext.request.contextPath }/inventoryManagement/selectInventoryInfoList.do'
            ,toolbar: '#toolbar'
            ,limits:[5,10,30]
            ,page: true
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'', title:'序号', sort: true, type:'numbers', width: 60}
                ,{field:'customer', title:'供应商',width:90,templet:function(row){
                        if(row.materiel.customer!=null){
                            return row.materiel.customer.customer_name;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'materiel_name', title:'物料名称',width:230,templet:function(row){
                        if(row.materiel!=null){
                            return row.materiel.materiel_name;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'materiel_num', title:'产品码',width:190,templet:function(row){
                        if(row.materiel!=null){
                            return row.materiel.materiel_num;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'materiel_size', title:'物料规格',width:100,templet:function(row){
                        if(row.materiel!=null){
                            return row.materiel.materiel_size;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'materiel_properties', title:'物料型号',width:100,templet:function(row){
                        if(row.materiel!=null){
                            return row.materiel.materiel_properties;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'unit', title:'单位',width:80,templet:function(row){
                        if(row.materiel!=null){
                            return row.materiel.unit;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'mBatch', title:'批次',width:150, align: 'center'}
                ,{field:'mNum', title:'数量',width:80}
                ,{field:'countAll', title:'总库存',width:90}
                ,{field:'upper_value', title:'库存上限',width:90,templet:function(row){
                        if(row.materiel!=null){
                            return row.materiel.upper_value;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'lower_value', title:'库存下限',width:90,templet:function(row){
                        if(row.materiel!=null){
                            return row.materiel.lower_value;
                        }else{
                            return "";
                        }
                    }}
                ,{field:'region', title:'所属库区',templet:function(row){
                        if(row.materiel.region!=null){
                            return row.materiel.region.region_name;
                        }else{
                            return "";
                        }
                    }}
                /*,{field:'enterDate',width:120, title:'入库日期',templet:function(row){
                        return row.enterDate.substr(0,16)
                    }}
                ,{field:'userName',width:120, title:'入库人',templet:function(row){
                        if(row.zcSysUser!=null){
                            return row.zcSysUser.userName;
                        }else{
                            return "";
                        }
                    }}*/
            ]]
            ,done:function(res, curr, count){

                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
        });

        var $ = layui.$, active = {
            reload: function(){


                //执行重载
                table.reload('contenttable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {

                        }
                    }
                }, 'data');
            }
        };

        table.on('row(table1)', function(obj){
            mid = obj.data.mid;
            mBatch = obj.data.mBatch;
            time = obj.data.enterDate.substr(0,16);
            man = obj.data.zcSysUser.userName;

            table.render({
                elem: '#tableOut'
                ,url:'${pageContext.request.contextPath }/reportForm/getStockInventoryInfoDetailedList.do?mid='+mid+'&mBatch='+mBatch
                ,toolbar: '#toolbar'
                ,title: '明细表'
                ,id :'contenttableDetails'
                ,limits:[10,20,30]
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'', title:'序号', sort: true, type:'numbers', width: 60}
                    ,{field:'region_name', title:'库区名称',
                        event: 'collapse',
                        templet: function(d) {
                            return '<div style="position: relative;'+'padding: 0 10px 0 20px;">' + d.region_name + '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>'
                        }
                    }
                    ,{field:'remark', title:'库位条码'}
                    ,{field:'weight', title:'物料数量'}
                ]]
                ,page: true
                ,done : function(){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                    })
                }
            });
        });

        table.on('tool(tableOut)', function(obj){
            var locationCode = obj.data.remark;
            if (obj.event === 'collapse') {
                var trObj = layui.$(this).parent('tr'); //当前行
                var accordion = true //开启手风琴，那么在进行折叠操作时，始终只会展现当前展开的表格。
                var content = '<table></table>' //内容
                //表格行折叠方法
                collapseTable({
                    elem: trObj,
                    accordion: accordion,
                    content: content,
                    success: function (trObjChildren, index) { //成功回调函数
                        //trObjChildren 展开tr层DOM
                        //index 当前层索引
                        trObjChildren.find('table').attr("id", index);
                        table.render({
                            elem: "#" + index
                            ,url:'${pageContext.request.contextPath }/reportForm/getTiaoMaList.do?mid='+mid+'&mBatch='+mBatch+'&time='+time+'&man='+man+'&locationCode='+locationCode
                            ,title: 'machineList'
                            ,limit:Number.MAX_VALUE
                            ,cols:
                                [[
                                    {title:'序号', sort: true, width: 60, type:'numbers', align:'center'},
                                    {field:'materiel_num', title: '条码', align:'center'},
                                    {field:'unit', title: '数量', align:'center'},
                                    {field:'brevity_num', title: '入库人', align:'center'},
                                    {field:'out_date', title: '入库时间', align:'center'}
                                ]]
                            ,page: false

                        });
                    }
                });
            }
        });

        function collapseTable(options) {
            var trObj = options.elem;
            if (!trObj) {
                return;
            }
            var accordion = options.accordion,
                success = options.success,
                content = options.content || '';
            var tableView = trObj.parents('.layui-table-view'); //当前表格视图
            var id = tableView.attr('lay-id'); //当前表格标识
            var index = trObj.data('index'); //当前行索引
            var leftTr = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + index + '"]'); //左侧当前固定行
            var rightTr = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + index + '"]'); //右侧当前固定行
            var colspan = trObj.find('td').length; //获取合并长度
            var trObjChildren = trObj.next(); //展开行Dom
            var indexChildren = id + '-' + index + '-children'; //展开行索引
            var leftTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-l tr[data-index="' + indexChildren + '"]'); //左侧展开固定行
            var rightTrChildren = tableView.find('.layui-table-fixed.layui-table-fixed-r tr[data-index="' + indexChildren + '"]'); //右侧展开固定行
            var lw = leftTr.width() + 15; //左宽
            var rw = rightTr.width() + 15; //右宽
            //不存在就创建展开行
            if (trObjChildren.data('index') != indexChildren) {
                //装载HTML元素
                var tr = '<tr data-index="' + indexChildren + '"><td colspan="' + colspan + '"><div style="height: auto;padding-left:' + lw + 'px;padding-right:' + rw + 'px" class="layui-table-cell">' + content + '</div></td></tr>';
                trObjChildren = trObj.after(tr).next().hide(); //隐藏展开行
                var fixTr = '<tr data-index="' + indexChildren + '"></tr>';//固定行
                leftTrChildren = leftTr.after(fixTr).next().hide(); //左固定
                rightTrChildren = rightTr.after(fixTr).next().hide(); //右固定
            }
            //展开|折叠箭头图标
            trObj.find('td[lay-event="collapse"] i.layui-colla-icon').toggleClass("layui-icon-right layui-icon-down");
            //显示|隐藏展开行
            trObjChildren.toggle();
            //开启手风琴折叠和折叠箭头
            if (accordion) {
                trObj.siblings().find('td[lay-event="collapse"] i.layui-colla-icon').removeClass("layui-icon-down").addClass("layui-icon-right");
                trObjChildren.siblings('[data-index$="-children"]').hide(); //展开
                rightTrChildren.siblings('[data-index$="-children"]').hide(); //左固定
                leftTrChildren.siblings('[data-index$="-children"]').hide(); //右固定
            }
            success(trObjChildren, indexChildren); //回调函数
            heightChildren = trObjChildren.height(); //展开高度固定
            rightTrChildren.height(heightChildren + 115).toggle(); //左固定
            leftTrChildren.height(heightChildren + 115).toggle(); //右固定
        }

    });




</script>

</body>
</html>